<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>飞鹤营养科技体验中心预约管理系统</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
  <style>
    html, body {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      background: url('images/bg.png') no-repeat center center fixed;
      background-size: cover;
    }

    @font-face{
        font-family: 'zhonghei';
        src : url('font/zhonghei.ttf');
    }

    @font-face{
        font-family: 'zhenghei';
        src : url('font/zhenghei.ttf');
    }

    .zhonghei{
        font-family: 'zhonghei';
    }

    .zhenghei{
        font-family: 'zhenghei';
    }


    .main-title {
      width: 100%;
      text-align: center;
      font-weight: normal;
      font-size: 40px;
      color: #FFFFFF;
      line-height: 48px;
      font-style: normal;
      position: absolute;
      top:114px;
    }
    .login-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.04);
      border-radius: 22px;
      width: 400px;
      height:320px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .form-group {
      width: 100%;
      margin-bottom: 18px;
    }
    .label-row {
      display: flex;
      align-items: center;
      margin-bottom:10px;
    }
    .input-icon {
      width: 20px;
      height: 20px;
      margin-right: 6px;
      opacity: 0.85;
    }
    .input-label {
      font-weight: normal;
      font-size: 18px;
      color: #1D1E25;
      line-height: 21px;
    }
    .form-input {
      width: 300px;
      height: 26px;
      font-weight: normal;
      font-size: 15px;
      color: #1D1E25;
      line-height: 26px;
      text-align: left;
      font-style: normal;
      border:0 none;
      border-bottom:1px solid #EFEFEF;
    }

    input::placeholder {
      color: #CCCCCC;
  }

    .login-btn {
      background: #DAB97B;
      border-radius: 26px;
      width: 346px;
      height: 52px;
      font-weight: normal;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 52px;
      text-align: center;
      font-style: normal;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="main-title zhonghei">飞鹤营养科技体验中心<br />预约管理系统</div>
  <div class="login-container">
      <div style="width:300px;height:155px;">
        <div class="form-group">
          <div class="label-row">
            <img src="images/icon-user.png" class="input-icon" />
            <span class="input-label zhonghei">账号</span>
          </div>
          <input type="text" class="form-input zhenghei" id="username" placeholder="请填写账号" name="username" autocomplete="off">
        </div>
        <div class="form-group">
          <div class="label-row">
            <img src="images/icon-password.png" class="input-icon" />
            <span class="input-label zhonghei">密码</span>
          </div>
          <input type="password" class="form-input zhenghei" id="password" placeholder="请填写登录密码" name="password" autocomplete="off">
        </div>

      </div>
      
      <div onclick="cli_login();" class="login-btn zhonghei">登录</div>
  </div>
<script>
    async function cli_login(){
        try {
            const response = await axios.post('/admin/login', {
                username: $('#username').val(),
                password: $('#password').val()
            });
            
            if(response.data.code == 0){
                window.location.href = "calendar.html";
            } else {
                alert(response.data.msg);
            }
        } catch (error) {
            alert('登录失败: ' + (error.response?.data?.msg || error.message));
        }
    }
</script>
</body>
</html> 